﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>查询分析</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script type="text/javascript" src="https://momentjs.com/downloads/moment.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <el-card v-loading="loading">
            <div slot="header">
                <el-button type="primary" round @click="save">保存</el-button>
                <span>还剩 {{count}} 条数据</span>
            </div>
            <el-row :gutter="20">
                <el-col :span="4" v-for="card in Cards" :key="card.id">
                    <el-card>
                        <div>
                            <image width="100%" :src="'/images/'+card.ImageName+'.bmp'"></image>
                            <el-radio-group v-model="card.TagTypeId">
                                <el-radio v-for="tag in CardTags" :label="tag.Id">{{tag.Name}}</el-radio>
                            </el-radio-group>
                            <el-input size="mini" v-model="card.TagName"></el-input>
                        </div>
                    </el-card>
                </el-col>
            </el-row>


        </el-card>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: function () {
                return {
                    CardTags: [],
                    Cards: [],
                    count:0,
                    loading: false,
                }
            },
            mounted: function () {
                this.getTags();
                this.getCards();
            },
            methods: {
                getTags: function () {
                    axios.get("/getCardTagTypes").then(({ data }) => {
                        this.CardTags = data.data
                    })
                },
                getCards: function () {
                    axios.get("/getCards").then(({ data }) => {
                        this.Cards = data.data
                    })
                },
                save: function () {
                    this.loading = true;
                    let cards = this.Cards.filter(x => {
                        return x.TagName != "" && x.TagName != null
                    });
                    if (cards.length == 0) {
                        this.$message.error('请填写卡牌名称');
                        this.loading = false;
                        return;
                    }
                  
                    axios.post("/postCards", cards).then(({ data }) => {
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        });
                        this.Cards = data.data;
                        this.loading = false;
                    })
                }
            }
        });
    </script>
    <style>
        .el-col {
            margin-bottom: 20px;
        }
    </style>
</body>

</html>